<template>
  <div class="qualityRankMini" v-loading="analysisCntLoading">
    <div class="qualityAnalysisSearch">
      <div class="mindRadioGroup">
        <span class="mindRadio" v-for="item in timeSearchList" :key="item.value" :class="{ active: item.value === qualityAnalysisSearch }" @click="qualityAnalysisChange(item.value)">{{item.label}}</span>
      </div>
      <timePickerMini :range="qualityAnalysisSearch" :change="qualityAnalysisChange" />
    </div>
    <div class="rank" refs="rank">
      <!-- <h2 class="title">水环境质量排名</h2> -->
      <div class="card">
        <div class="cardTit">
          <span>{{factorRankTitle}}分指数排名统计</span>
          <el-select class="cardSelect" v-model="factorRankSearch.search" placeholder="请选择" size="mini" @change="factorRankSearchChange">
            <el-option
              v-for="item in searchFactor"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

        </div>
        <div class="chartBox" ><charts :option="factorRankChart"></charts></div>
      </div>
      <div class="card">
        <div class="cardTit">
          <span>水站排名统计分析</span>
          <el-radio-group v-model="analysisSearchType" fill="#409EFF" size="mini" class="searchAnalysis" @change="changeCurSearchAnalysis">
            <el-radio-button label="0">水站</el-radio-button>
            <el-radio-button label="1">街道</el-radio-button>
          </el-radio-group>
        </div>
        <div class="rankAnalysisChartBox">
          <div class="rankAnalysisChart" ><charts :option="rankAnalysisChart['监测值排名']"></charts></div>
          <div class="rankAnalysisChart" ><charts :option="rankAnalysisChart['水质达标天数排名']"></charts></div>
          <div class="rankAnalysisChart" ><charts :option="rankAnalysisChart['环比变化量排名']"></charts></div>
          <div class="rankAnalysisChart" ><charts :option="rankAnalysisChart['环比排名变化量排名']"></charts></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
import charts from '../components/charts.vue'
import common from "../plugins/common.js";
import timePickerMini from "../components/timePickerMini.vue";
export default {
  name: "qualityRankMini",
  props: ['isShow'],
  components: {
    charts, timePickerMini
  },
  data() {
    return {
      analysisCntLoading: false,
      qualityAnalysisSearch: "259200000",
      timeSection: [null, null],
      timeSearchList: [
        { label: "近三天", value: "259200000" },
        { label: "近一周", value: "604800000" },
        { label: "近一个月", value: "2592000000" },
      ],
      factorRankTitle: 'pH',
      factorRankSearch: {
        search: "pH",
      },
      searchFactor: [
        // {label: '污染指数', value: 'pollutionIndex'},
        {label: 'pH', value: 'pH'},
        {label: '氨氮', value: 'ammoniaNitrogen'},
        {label: '总氮', value: 'nitrogen'},
        {label: '总磷', value: 'phosphorus'},
        {label: '总铜', value: 'cuprum'},
        {label: '总镍', value: 'nickel'},
        {label: '总氰化物', value: 'prussiate'},
        {label: '总铬', value: 'chromium'},
        {label: 'CODcr', value: 'COD'},
      ],
      factorRankChart: {}, //水环境质量排名 - 分指数排名统计

      analysisSearchType: "0",
      rankAnalysisDefault: {
        /**
         * 需要动态配置的选项
         * 
         * color: xxx,  #25d07e; #ffad01; #0063ed; #44bce9;
         * 
         * title.text
         * xAxis.data
         * series[0].data
         * 
         */
        grid: {
          top: 40,
          left: 40,
          right: 20,
          bottom: 90
        },
        title: {
          bottom: 0,
          left: 'center',
          subtextStyle: {
            color: '#939393',
          }
        },
        tooltip : {
          trigger: 'axis',
          axisPointer : {
            type : 'shadow'
          },
          formatter: '{b}：{c}'
        },
        xAxis: {
          data: [],
          axisLine: {onZero: false},
          axisTick: {
            show: false,
          },
          axisLabel: {
            formatter: (value) => value.split("").join("\n")
          }
        },
        yAxis: {
          name: '数值',
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: 'bar',
            type: 'bar',
            barWidth: 10,
            data: []
          },
        ]
      },
      rankAnalysisChart: {
        "监测值排名": {},
        "水质达标天数排名": {},
        "环比变化量排名": {},
        "环比排名变化量排名": {},
      },
    }
  },
  computed: {
    ...mapGetters({
      factorRankData: 'getQualityFactorRankChart',
      rankAnalysis: 'getRankAnalysisChart',
      times: 'getTimes'
    })
  },
  methods: {
    ...mapActions([
      'fetchFactorChart',
      'fetchQualityEvaluationChart',
      'fetchAnalysisChart',
      'fetchQualityEvaluationLine'
    ]),
    qualityAnalysisChange(val) { //水环境质量分析 时间段筛选变化
      this.qualityAnalysisSearch = val
      setTimeout(() => {
        this.postFactorChart(this.factorRankSearch)
        this.postAnalysisChart(this.analysisSearchType)
      })
    },
    factorRankSearchChange(val) { //分指数排名统计 筛选因子变化
      this.factorRankSearch.search = val
      this.factorRankTitle = this.searchFactor.find(item => item.value === val).label
      this.postFactorChart()
    },
    async postFactorChart(param = this.factorRankSearch) { //请求 水环境质量排名
      this.analysisCntLoading = true
      await this.fetchFactorChart({
        startTime: this.times.startTime,
        endTime: this.times.endTime,
        search: param.search
      })
      this.configChartFactorRank(this.factorRankData)
      this.analysisCntLoading = false
    },
    configChartFactorRank(data) {
      /** 因子排名统计图表配置 */
      this.factorRankChart = {
        color: ['#8578ff'],
        grid: {
          top: 20,
          left: 30,
          right: 10,
          bottom: 80
        },
        tooltip : {
          trigger: 'axis',
          formatter: "{b}<br />" + this.factorRankTitle + "{a}: {c}",
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis : [
          {
            type : 'category',
            data : data.map(v => v.name),
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: (value) => value.split("").join("\n")
            }
          }
        ],
        yAxis : {
          type : 'value',
          axisTick: {
            show: false
          },
        },
        series : [
          {
            name: '分污染指数',
            type:'bar',
            barWidth: 10,
            stack: '1',
            data: data.map(v => v.value !== -1 ? v.value.toFixed(2) : 0),
          },
          
        ]
      }
    },
    changeCurSearchAnalysis(val) { //水站/街道排名统计分析 类型变化
      this.analysisSearchType = val
      this.postAnalysisChart(val) 
    },
    async postAnalysisChart(analysisSearchType) {
      this.analysisCntLoading = true
      await this.fetchAnalysisChart({
        startTime: this.times.startTime,
        endTime: this.times.endTime,
        type: analysisSearchType,
      })
      this.configChartrankAnalysis(this.rankAnalysis)
      this.analysisCntLoading = false
    },
    configChartrankAnalysis(data) {
      const color = {
        "监测值排名": "#25d07e",
        "水质达标天数排名": "#ffad01",
        "环比变化量排名": "#0063ed",
        "环比排名变化量排名": "#44bce9",
      } 
      for(let v in this.rankAnalysisChart) {
        this.rankAnalysisChart[v] = common.deepClone(this.rankAnalysisDefault)
      }
      for(let key in data) {
        this.rankAnalysisChart[key].color = color[key]
        this.rankAnalysisChart[key].title.subtext = key
        this.rankAnalysisChart[key].xAxis.data = data[key].map(v => v.name)
        this.rankAnalysisChart[key].series[0].data = data[key].map(v => v.value !== null ? v.value.toFixed(2) : 0)
      }
      
      this.rankAnalysisChart["监测值排名"].tooltip.formatter = '{b} 污染指数：{c}'

      this.rankAnalysisChart["水质达标天数排名"].yAxis.name = "天"
      this.rankAnalysisChart["水质达标天数排名"].yAxis.minInterval  = 1
      this.rankAnalysisChart["水质达标天数排名"].tooltip.formatter = (params) => params[0].name + '：' + Number(params[0].value).toFixed(0) + '天'
      
    },
  },
  mounted() {
    this.qualityAnalysisChange(this.qualityAnalysisSearch);
  },
  watch: {
    isShow(newVal) {
      if(newVal) this.qualityAnalysisChange(this.qualityAnalysisSearch);
    }
  }
}
</script>

<style scoped>
.qualityRankMini {
}
.rank {
  width: 100%;
  height: 100%;
}

.qualityRankMini .title {
  line-height: 40px;
  font-size: 14px;
  color: #0063ed;
}
.qualityRankMini .qualityAnalysisSearch {
  padding-bottom: 12px;
}
.qualityRankMini .card {
  padding: 8px 8px 0;
  margin-bottom: 8px;
  box-shadow: 1px 1px 5px 0px rgba(75, 75, 75, 0.2);
  background-color: #fff;
}
.card .cardTit {
  position: relative;
  padding-left: 8px;
  font-size: 12px;
  line-height: 28px;
  color: #535353;
}
.card .cardTit::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 16px;
  background: #0063ed;
  top: 50%;
  margin-top: -8px;
  left: 0;
}
.card .cardTit .cardSelect {
  position: absolute;
  right: 0px;
  width: 100px;
}
.card .chartBox {
  width: 100%;
  height: 200px;
}
.rankAnalysisChartBox {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.rankAnalysisChartBox .rankAnalysisChart {
  width: 50%;
  height: 220px;
  margin-bottom: 15px;
}
.searchAnalysis {
  position: absolute;
  right: 0;
}

.mindRadioGroup {
  height: 28px;
  line-height: 28px;
}
.mindRadio {
  box-sizing: border-box;
  font-size: 12px;
  padding: 2px 10px;
  border: 1px solid;
  border-color: transparent;
  margin-right: 10px;
  border-radius: 12px;
  transition: .25s ease;
  cursor: pointer;
}
.mindRadio:hover {
  color: #54b1fd;
}
.mindRadio.active {
  color: #54b1fd;
  border-color: #54b1fd;
}
.timeInfo {
  position: relative;
  display: inline-block;
  font-size: 12px;
  color: #bfbfbf;
}
.timeInfo .text {
  position: relative;
  display: inline-block;
  z-index: 2;
}
.timeInfo .hiddenDatePicker {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 145px;
  height: 20px;
  z-index: 1;
}
</style>